<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>部门管理</el-breadcrumb-item>
	     <el-breadcrumb-item>部门信息</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
			<el-col :span="4">
				<el-button type="primary" @click="handleAdd">新增部门</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="list">部门列表</el-button>
			</el-col>
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="500">
	       <el-table-column
	         fixed
	         prop="departmentID"
	         label="部门编号"
	         width="360">
	       </el-table-column>
	       <el-table-column
	         prop="departmentName"
	         label="部门名称"
	         width="360">
	       </el-table-column>
		   <el-table-column
		     prop="number"
		     label="部门人数"
		     width="360">
		   </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
				<el-button
	            @click="handleEdit(scope.row)"
	             type="text"
	             size="small">
	             编辑
	           </el-button>
	           <el-button
	            @click="deleteRow(scope.row.departmentID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	           
	         </template>
	       </el-table-column>
	     </el-table>

	   <!-- 文本框 -->
	   <el-dialog
	     title="编辑部门信息"
	     :visible.sync="dialogVisible"
	     width="40%"
	     :before-close="handleClose">
		 <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
		
		   <el-form-item label="部门名称" prop="departmentName">
		     <el-input v-model="ruleForm.departmentName"></el-input>
		   </el-form-item>
		   <el-form-item label="部门人数" prop="number">
		     <el-input v-model="ruleForm.number"></el-input>
		   </el-form-item>
		 </el-form>
	
	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="handleSubmit()">确 定</el-button>
	     </span>
	   </el-dialog>
	   
   </div>
   
</template>
<script>
	export default{
		name: 'HomeView',
		components: {},

		mounted(){
			this.list();
		},
		data(){
			return {
				allid:'',
				
				searchQuery:'',
				
				ruleForm: {
					departmentID: '',
					departmentName: '',
					number: ''
				},
				
			    goods: 5,
				dialogVisible:false,
				labelPosition: 'right',
				
				rules:{  
						departmentName: [
							{ required: true, message: '请输入部门名称', trigger: 'blur' }
				    	],  
				    	number: [  
				    	  	{ required: true, message: '请输入部门人数', trigger: 'blur' }  
				    	]
				},	
				tableData:[]
			};
		},

		methods: {

			handleAdd() {
				this.dialogVisible = true;
				 // 重置 allid，确保在添加新公告时不会执行编辑操作
				 this.allid = '';
			},
			handleEdit(row) {
				this.dialogVisible = true;
				this.ruleForm = JSON.parse(JSON.stringify(row));
				this.allid=row.departmentID;
			},

			handleClose(){
				this.dialogVisible = false;
				// 重置表单数据
  				this.ruleForm = {
					departmentID: '',
					departmentName: '',
					number: ''
  				};
				this.list();
			},

			handleSubmit(){
				if(this.allid){
					this.editDataToTable();
				}else{
					this.addDataToTable();
				}
				this.handleClose();
			},

			editDataToTable(){
				this.axios.post('/DepartmentsModify', this.ruleForm)
       			.then(response => {
       		  	if (response.data.code === 200) {
       				this.$message.success(response.data.message);
       			} else {
       			  this.$message.warning(response.data.message);
       			}
       			})
       			.catch(error => {
       			  console.error(error);
       			  this.$message.error(error.response.data.message);
       			});
            },
			
			list(){
				this.axios.post('/DepartmentsList', {})
				.then(response => {
					this.tableData=response.data.data.list;
				 })
				.catch(error => {
				   console.error(error);
				 });
			},
			
		    deleteRow(id) {
		      this.axios.get("/DepartmentsRemove",{
		          params: {
		            departmentID: id
		          }
		        })
		      .then(
		      	response=>{
		      		console.log(response.data);
		      		this.$message.success('删除成功'); 
					this.list();
		      	}
				
		      )
			  
		      .catch(error => {
		         console.error(error);
		       });
		    },

			addDataToTable() {  
				 this.axios.post('/DepartmentsAdd', this.ruleForm)
				 .then(response => {
				
				   if (response.data.code === 200) {
					   this.$message({
						 message: response.data.message,  
						 type: 'success'  
					   });  
				   }else{
					   this.$message({
						 message: response.data.message,  
						 type: 'warning' 
						 });  
				   }	
				 })
				.catch(error => {
						console.error(error);  
						this.$message({  
						message: error.response.data.message,  
						type: 'error'  
						});  
					});  
			},
			
			
			resetForm() {  
			      this.$refs.orderForm.resetFields();   
			}
		},
			
	}
</script>

<style lang ="less" scoped>


</style>